<template>
  <el-container>
    <el-main class="main">
      <el-table :data="users" row-key="id" v-loading="statusData.loading">
        <el-table-column prop="id" label="用户编号" width="80" show-overflow-tooltip></el-table-column>
        <el-table-column prop="userName" label="用户名" width="80" show-overflow-tooltip></el-table-column>
        <el-table-column prop="permissions" label="权限" width="auto" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.roles.map(item => item.permissions).join(',') }}
          </template>
        </el-table-column>
        <el-table-column prop="roles" label="角色" width="auto" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.roles.map(item => item.rname).join(',') }}
          </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="status" label="状态" width="80" show-overflow-tooltip>
          <template #default="scope">
            <tag-dict :data="dict" :model-value="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template #default="scope">
            <el-button plain bg type="primary" size="small" @click="handleAlter(scope.row)">编辑</el-button>
            <el-button plain bg type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-if="page.total"
          v-model:current-page="page.current"
          :page-size="page.size"
          :page-sizes="[10, 20, 30, 40,50]"
          layout="total,sizes, prev, pager, next"
          @currentChange="pageUsers"
          @size-change="handleSizeChange"
          :total="page.total"
      />
    </el-main>
    <el-dialog append-to-body v-model="statusData.dialog" title="用户信息管理" width="600px"
               destroy-on-close
               :close-on-click-modal="false">
      <el-form ref="uploadRef" :model="uploadForm" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="角色信息" prop="roles">
              <el-select v-model="uploadForm.roleIds" multiple>
                <el-option
                    v-for="item in roles"
                    :key="item.id"
                    :label="item.rname"
                    :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="handleAssociate">确定</el-button>
        <el-button @click="statusData.dialog=false">取消</el-button>
      </template>
    </el-dialog>
  </el-container>
</template>
<script setup lang="ts">
import {onBeforeMount, onBeforeUnmount, ref} from 'vue'
import {Dict, PageParams, SelfEventListener} from "@/api/common.ts";
import {associateRole, pageUser, User, userDict, UserRolePost} from "@/api/user.ts";
import {getRoles, Role} from "@/api/role.ts";

onBeforeMount(() => {
  init()
})
onBeforeUnmount(() => {

})

/**
 * 分页获取的所有用户信息
 */
const users = ref<User[]>([])

/**
 * 获取的用户字典
 */
const dict = ref<Dict[]>()

/**
 * 用户角色列表
 */
const roles = ref<Role[]>()

/**
 * 需要上传的form表单
 */
const uploadForm = ref<UserRolePost>({
  userId: 0,
  roleIds: []
})

/**
 * 计时器和监听事件
 */
const timers: SelfEventListener = {
  interval: [], listener: [], time: []
}

/**
 * 保存的所有当前组件状态
 */
const statusData = ref({
  loading: true, dialog: false, avatarDialog: false
})

/**
 * 分页参数
 */
const page = ref<PageParams>({
  total: 200,
  current: 1,
  size: 20
})

/**
 * 页面初始化
 */
const init = () => {
  initDict()
}

/**
 * 初始化字典
 */
const initDict = async () => {
  userDict().then(res => {
    dict.value = res.data.data
  }).then(pageUsers).then(initRoles)
}

/**
 * 分页查询用户信息
 */
const pageUsers = () => {
  pageUser({currentPage: page.value.current, pageSize: page.value.size}).then((res) => {
    users.value = res.data.data.records
    page.value.current = res.data.data.current
    page.value.size = res.data.data.size
    page.value.total = res.data.data.total
    statusData.value.loading = false
  })
}

/**
 * 获取角色信息
 */
const initRoles = () => {
  getRoles().then(res => {
    roles.value = res.data.data
  })
}

/**
 * 修改用户操作
 * @param da 用户
 */
const handleAlter = (da: User) => {
  uploadForm.value.userId = da.id;
  uploadForm.value.roleIds = da.roles.map(r => r.id)
  statusData.value.dialog = true
}

/**
 * 修改分页size
 * @param val
 */
const handleSizeChange = (val: number) => {
  page.value.size = val
  pageUsers()
}

const handleAssociate = () => {
  associateRole(uploadForm.value).then(() => {
    pageUsers()
    statusData.value.dialog = false
  })
}
</script>
<style scoped>
.main {
  padding: 0;
}

.avatar {
  position: relative;
}

.avatar:hover::after {
  background: rgba(0, 0, 0, .5);
  content: "+";
  inset: 0;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: absolute;
  cursor: pointer;
}

.cropper {
  height: 350px;
}

.upload {
  display: inline-flex;
}

.margin-left-12 {
  margin-left: 12px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-upload-preview {
  height: 240px;
  width: 240px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 4px #ccc;
}
</style>